<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: scroll;
        }

        .el-header, .el-footer {
            /*background-color: #B3C0D1;*/
            color: #333;
            /*text-align: center;*/
            /*height: 40px;*/
        }

        .el-aside {
            /*background-color: #D3DCE6;*/
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }
        .el-select .el-input {
            width: 50px;
        }
        .input-with-select .el-input-group__prepend {
            /*background-color: #fff;*/
        }
    </style>
</head>
<body>


<div id="app" style="width: 100%;height: 100%;">
    <el-container>
        <!--        顶层搜索栏+添加按钮-->
        <el-header style="margin-right: 20px;">
            <el-container>
                <!--                搜索栏-->
                <el-main style="width: 50%;padding: 0;text-align: right;">
                    <el-input placeholder="请输入要查询的客户id" v-model="input1" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="getClient(input1)"></el-button>
                    </el-input>
                </el-main>
                <!--                添加按钮-->
                <el-aside width="80px">
                    <el-button type="text" @click="dialogFormVisible = true">添加</el-button>
                    <el-dialog fullscreen="true" title="客户信息" :visible.sync="dialogFormVisible" style="text-align: left!important;" >
                        <el-form :model="form">
                            <el-form-item label="客户名字" :label-width="formLabelWidth">
                                <el-input v-model="form.customerName" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false,addCustomer()">确 定</el-button>
                        </div>
                    </el-dialog>

                    <el-button type="text" @click="location.reload()">刷新</el-button>
                </el-aside>
            </el-container>
        </el-header>
        <!--        展示列表-->
        <el-mian width="80%">
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="customerId"
                            label="ID"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="customerName"
                            label="客户名字"
                            width="*">
                    </el-table-column>

                    <el-table-column width="180">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="small"></el-button>

                            <el-dialog fullscreen="true" title="客户信息" :visible.sync="dialogFormVisible1" style="text-align: left!important;" >
                                <el-form :model="form1">
                                    <!--                                    客户id不能修改-->
                                    <!--                                    <el-form-item label="客户ID" :label-width="formLabelWidth">-->
                                    <!--                                        <el-input v-model="form1.customerId" autocomplete="off"></el-input>-->
                                    <!--                                    </el-form-item>-->
                                    <el-form-item label="客户名字" :label-width="formLabelWidth">
                                        <el-input v-model="form1.customerName" autocomplete="off"></el-input>
                                    </el-form-item>

                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible1 = false,fixCustomer()">确 定</el-button>
                                </div>
                            </el-dialog>
                            <el-button @click.native.prevent="open(scope.$index,scope.row.customerId)" type="danger" icon="el-icon-delete" size="small"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-mian>

    </el-container>

</div>


<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                input1:'',
                tableData: [],
                dialogVisible: false,
                dialogFormVisible: false,
                dialogFormVisible1: false,
                // 表单内容稍后再改
                form: {
                    customerName: ''
                },
                formLabelWidth: '120px',
                form1: '',
            }
        },
        created:function(){
            this.getCustomerList();
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);

            },
            // 获取客户信息
            getCustomerList(){
                axios.post('/client/getAllClient'
                ).then(function (res) {
                    console.info(res.data);
                    // let list = JSON.parse(res.data);
                    let list = res.data;
                    let bufferList = [];
                    for(let key in list) {
                        let i = new Object();
                        i.customerId = list[key].clientid;
                        i.customerName = list[key].clientname;
                        bufferList.push(i);
                    }
                    app.tableData = bufferList;
                    console.info(app.tableData);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 添加客户
            addCustomer(){
                axios.post('/client/addClient',
                    "clientName="+this.form.customerName
                ).then(function (res) {
                    console.info(res.data);
                    if (res.data==='添加成功'){
                        app.getCustomerList();
                        app.addSuccess();
                        app.form.customerName='';
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 添加成功后的弹窗
            addSuccess(){
                this.$message({
                    message:'添加成功',
                    type:'success'
                });
            },
            // 修改客户信息的操作
            fixCustomer(){
                axios.post('/client/fixClient',
                    "clientId="+this.form1.customerId+
                    "&clientName="+this.form1.customerName
                ).then(function (res) {
                    console.info(res.data);
                    app.editSuccess();
                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 修改成功后的弹框
            editSuccess(){
                this.$message({
                    message:'编辑成功',
                    type:'success'
                })
            },
            edit(row){
                this.dialogFormVisible1 = true;
                console.log(row);
                this.form1 = row;
            },
            // 删除按钮的响应事件
            deleteCustomer(index,id){
                axios.post('/client/deleteClient',
                    "clientId="+id
                ).then(function (res) {
                    console.info(res.data);
                    // alert(index);
                    if(res.data==='删除成功'){
                        app.tableData.splice(index, 1);
                        // app.deleteSuccess();
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },
            // 点开删除按钮时弹出的确定框
            open(index,id) {
                this.$confirm('此操作将永久删除该成员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    app.deleteCustomer(index,id);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getClient(id){
                axios.post('/client/getClient',
                    "clientId="+id
                ).then(function (res) {
                    console.info(res.data);
                    // let list = JSON.parse(res.data);
                    let list = res.data;
                    let bufferList = [];

                    let i = new Object();
                    if(list == null){
                        app.findFail();
                        // location.reload();
                    }
                    else{
                        i.customerId = list.clientid;
                        i.customerName = list.clientname;
                        app.findSuccess();
                        bufferList.push(i);
                        app.tableData = bufferList;
                        console.info(app.tableData);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            findCustomer(id){
                app.getClient(id);
            },
            findSuccess(){
                this.$message({
                    message:'查找成功',
                    type:'success'
                })
            },
            findFail(){
                this.$message.error("查找失败，请重新输入");
            }
        }
    })


</script>
</body>
</html>
